<template>
  <div class="tem-container" id="tem-index">
    <div class="tem-testarea">
      <el-container style="height: 100%;">
        <el-aside width="250px" style="background-color: rgb(238, 241, 246)">
          <el-header style="height: 56px;text-align: right; font-size: 12px;background: #b3c0d1;">
          </el-header>
          <el-main style="height: calc(100% - 60px);">
            <el-scrollbar class="page-scroll">
              <el-menu
                ref="menuRef"
                class="el-menu-vertical-demo"
                background-color="#EEF1F6"
                @select="handleSelect"
              >
                <MenuTree :menuData="subList"></MenuTree>
              </el-menu>
            </el-scrollbar>
          </el-main>
        </el-aside>
        <el-container>
          <el-header style="height: 56px;text-align: right; font-size: 12px;background: #b3c0d1;padding-top: 14px;">
            <router-link to="markdownEditor"><el-button type="primary" size="mini">编辑</el-button></router-link>
          </el-header>
          <el-main style="background-color: #e9eef3;">
            <vueSubject v-if="activeName === 'vue'"></vueSubject>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
import api from '../api'
import vueSubject from "../components/routerList/vueList"
import MenuTree from "../components/subjectMenu.vue"
export default {
  components: {
    vueSubject: vueSubject,
    MenuTree: MenuTree
  },
  data() {
    return {
      activeName: 'vue',
      subjectList: [
        {
          name: "demo-javascript",
          text: "JavasCript",
          icon: "demo-icon-javascript",
          items: [],
          outter: false
        },
        {
          name: "demo-vue",
          text: "Vue",
          icon: "demo-icon-vue",
          items: [],
          outter: false
        },
        {
          name: "demo-java",
          text: "Java",
          icon: "demo-icon-java",
          items: [],
          outter: false
        },
        {
          name: "demo-zjj",
          text: "中间件",
          icon: "demo-icon-zjj",
          items: [
            {
              name: "demo-redis",
              text: "Redis",
              icon: "demo-icon-redis",
              items: [],
              outter: false
            },
            {
              name: "demo-mq",
              text: "MQ",
              icon: "demo-icon-mq",
              items: [
                {
                  name: "demo-activemq",
                  text: "ActiveMQ",
                  icon: "demo-icon-activemq",
                  items: [],
                  outter: false
                },
                {
                  name: "demo-rabbitmq",
                  text: "RabbitMQ",
                  icon: "demo-icon-rabbitmq",
                  items: [],
                  outter: false
                },
                {
                  name: "demo-rocketmq",
                  text: "RocketMQ",
                  icon: "demo-icon-rocketmq",
                  items: [],
                  outter: false
                },
                {
                  name: "demo-kafka",
                  text: "Kafka",
                  icon: "demo-icon-kafka",
                  items: [],
                  outter: false
                }
              ],
              outter: false
            }
          ],
          outter: false
        }
      ],
      subList: []
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeName = key.substring(5, key.length)
    },
    gethello(){
      let _this = this
      api.post('/menu/getCatalogTreeData', {
      }).then(res => {
        console.log(res.data)
        _this.subList = res.data
      }).catch(err => {})
    }
  },
  mounted(){
    this.gethello()
  }
}
</script>
<style scoped>
.tem-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tem-back {
  float: left;
  margin: 0 0 10px 0;
}
.tem-testarea {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: #fff;
  box-shadow: 0 0 5px #ccc;
}
</style>